<template>
  <!-- 分页表格，自定义数据,前端分页 -->
  <fragment>
    <div class="table-list-box">
      <el-table
        ref="table"
        row-key="t_index"
        :max-height="maxHeight"
        highlight-current-row
        :data="paginationData.data"
        header-row-class-name="table-list-header"
        @current-change="handleCurrentChange"
        @selection-change="selcetiongChange"
      >
        <slot></slot>
      </el-table>
      <el-pagination
        v-if="paginationData.data&&paginationData.data.length&&isPagination"
        :current-page="paginationData.page"
        :page-sizes="[10,20,50,100, 200, 300, 400]"
        :page-size="paginationData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationData.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </fragment>
</template>
<script>
import pagination from '@/utils/pagination'
export default {
  name: 'TableBoxPageAll',
  inheritAttrs: false,
  props: {
    maxHeight: {
      type: String,
      default: '300px'
    },
    data: {
      // 传入的数据
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    selectedArry: {
      // 选中的数据
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    isPagination: {
      // 是否分页
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableData: [],
      paginationData: {
        data: [],
        page: 1,
        size: 10
      },
      currentRow: null
    }
  },
  watch: {
    data: {
      handler(val) {
        this.tableData = val
        if (this.isPagination) {
          this.paginationData = pagination(val, 1, 10)
        } else {
          this.paginationData.data = val
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
      // 选中行
      this.$emit('clickRow', val)
    },
    handleSizeChange(val) {
      this.paginationData = pagination(
        this.tableData,
        this.paginationData.page,
        val
      )
    },
    handlePageChange(val) {
      this.paginationData = pagination(
        this.tableData,
        val,
        this.paginationData.size
      )
    },
    selcetiongChange(val) {
      this.$emit('selectionChange', val)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
